<template>
	<view class="item">
		<!-- 图片 -->
		<view class="img">
			<!-- 主图片 -->
			<image class="itemImage" :src="item.itemImage" mode="widthFix" lazy-load></image>
			<!-- 播放图标 -->
			<image class="icon play" src="/static/play.png" mode="widthFix" lazy-load></image>
			<!-- 标签 -->
			<image class="icon lefttop_taglist" :src="item.lefttop_taglist?.[0]?.img" mode="widthFix" lazy-load>
			</image>
			<!-- 用户 -->
			<view class="user">
				<!-- 头像 -->
				<view class="img">
					<image :src="item.actorAvatar" mode="widthFix" lazy-load></image>
				</view>
				<!-- 昵称 -->
				<view class="nickname">
					{{item.actorName}}
				</view>
				<!-- 标签 -->
				<view class="label">{{item.actorTag}}</view>
			</view>
		</view>
		<!-- 文本 -->
		<view class="text">
			<!-- 标题 -->
			<view class="title">
				{{item.title}}
			</view>
			<!-- 下部分 -->
			<view class="bottom_text">
				<!-- 左边的价格 -->
				<view class="left">
					<!-- 价格 -->
					<view class="price">
						<span class="n1">{{item.showDiscountPrice.split('.')[0]}}</span>
						<span>.</span>
						<span>{{item.showDiscountPrice.split('.')[1]}}</span>
					</view>
					<!-- 标签 -->
					<image class="icon" :src="item.bottomIcon" mode="widthFix" lazy-load></image>
				</view>
				<!-- 右边的统计 -->
				<view class="right">
					{{item.sale}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				require: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		overflow: hidden;
		background-color: #fff;
		height: fit-content;
		border-radius: 10upx;

		>.img {
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;

			.itemImage {
				width: 100%;
			}

			.icon.play {
				position: absolute;
				top: 10upx;
				right: 10upx;
				width: 60upx;
				border-radius: 50%;
			}

			.lefttop_taglist {
				position: absolute;
				top: 20upx;
				left: 20upx;
				width: 100upx;

			}

			.user {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 20upx;
				display: flex;
				text-wrap: nowrap;
				color: white;
				font-size: 0.7rem;
				gap: 10upx;
				align-items: center;
				box-sizing: border-box;

				.img {
					overflow: hidden;
					border-radius: 50%;
					border: 1upx solid white;
					height: 40upx;
					width: 40upx;

					image {
						width: 100%;
					}

				}

				.label {
					background-color: rgba(0, 0, 0, 0.4);
					font-size: 0.6rem;
					padding: 4upx;
				}
			}

		}

		>.text {
			font-size: 0.7rem;
			padding: 20upx;
			text-align: justify;

			.title {
				display: -webkit-box;
				/* 必须结合弹性盒子模型 */
				-webkit-box-orient: vertical;
				/* 文本排列方向为垂直 */
				-webkit-line-clamp: 2;
				/* 限制显示的行数 */
				overflow: hidden;
			}

			.bottom_text {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #FF4466;

				.left {
					display: flex;
					align-items: center;
					gap: 10upx;

					.price {
						.n1 {
							font-size: 0.9rem;
						}
					}

					.icon {
						width: 40upx;
					}
				}

				;
			}
		}
	}
</style>